#{extends 'main.html' /}
#{set title:'Seyahat Detayı' /}



<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
      function calculateRoute(from, to) {
        // Center initialized to Naples, Italy
        var myOptions = {
          zoom: 10,
          center: new google.maps.LatLng(40.84, 14.25),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Draw the map
        var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
        var directionsService = new google.maps.DirectionsService();
        var directionsRequest = {
          origin: from,
          destination: to,
          travelMode: google.maps.DirectionsTravelMode.DRIVING,
          unitSystem: google.maps.UnitSystem.METRIC
        };
        directionsService.route(
          directionsRequest,
          function(response, status)
          {
            if (status == google.maps.DirectionsStatus.OK)
            {
              new google.maps.DirectionsRenderer({
                map: mapObject,
                directions: response
              });
            }
            else
              $("#error").append("Unable to retrieve your route<br />");
          }
        );
      }
      $(document).ready(function() {
        // If the browser supports the Geolocation API
        if (typeof navigator.geolocation == "undefined") {
          $("#error").text("Your browser doesn't support the Geolocation API");
          return;
        }
        $("#from-link, #to-link").click(function(event) {
          event.preventDefault();
          var addressId = this.id.substring(0, this.id.indexOf("-"));
          navigator.geolocation.getCurrentPosition(function(position) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
              "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
            },
            function(results, status) {
              if (status == google.maps.GeocoderStatus.OK)
                $("#" + addressId).val(results[0].formatted_address);
              else
                $("#error").append("Unable to retrieve your address<br />");
            });
          },
          function(positionError){
            $("#error").append("Error: " + positionError.message + "<br />");
          },
          {
            enableHighAccuracy: true,
            timeout: 10 * 1000 // 10 seconds
          });
        });
        $("#calculate-route").submit(function(event) {
          event.preventDefault();
          calculateRoute($("#from").val(), $("#to").val());
        });
      });
    </script>

    <style type="text/css">
      #map {
        width: 500px;
        height: 400px;
        margin-top: 10px;
      }
    </style>

<div class="details-main">


<div class="details-title">
${hitcJourney.departurestate} - ${hitcJourney.departuretownn} ---> ${hitcJourney.arrivestate} - ${hitcJourney.arrivetownn}

<div class="series_share">
	<img src="@{'/public/images/facebookShareIcon.png'}" width="14" height="14" border="0" style="vertical-align:middle;" />
	<a href=""  onclick="postToFeed('${hitcJourney?.user.name} @ Goturbenigittiginyere', '', '${user?.name} is looking ${hitcJourney?.arrivestate}', '${hitcJourney?.arrivestate} @ TV World', '',''); return false;">Share</a>
</div>
</div>



<div class="details-left">

<div class="details-left-name">
${hitcJourney.user.name}
</div>

<div class="details-left-pic">
<img alt="${hitcJourney.user.name}" width="120px" src="${hitcJourney.user.profilPictureBig}">
</div>

<div class="details-left-link">
<a href="/message/${hitcJourney.user.id}" style="color: #59983B;">Mesaj Gönder</a>
</div>

<div class="details-left-link">
<a href="/profile/${hitcJourney.user.id}" style="color: #59983B;">Profil Detayı</a>
</div>

</div>



<div class="details-right">

<div class="details-right-title">
Seyahat Detayı
</div>

<div class="details-right-route">

<div class="details-right-depart">

<div class="details-right-depart-title">
Çıkış:
</div>

<div class="details-right-depart-left">
İl:
</div>

<div class="details-right-depart-right">
${hitcJourney.departurestate}
</div>

<div class="details-right-depart-left">
İlçe:
</div>

<div class="details-right-depart-right">
${hitcJourney.departuretownn}
</div>

<div class="details-right-depart-left">
Semt:
</div>

<div class="details-right-depart-right">
${hitcJourney.departurestreet}
</div>

</div>

<div class="details-right-arrive">

<div class="details-right-depart-title">
Varış:
</div>

<div class="details-right-depart-left">
İl:
</div>

<div class="details-right-depart-right">
${hitcJourney.arrivestate}
</div>

<div class="details-right-depart-left">
İlçe:
</div>

<div class="details-right-depart-right">
${hitcJourney.arrivetownn}
</div>

<div class="details-right-depart-left">
Semt:
</div>

<div class="details-right-depart-right">
${hitcJourney.arrivestreet}
</div>

</div>

</div>

<div class="details-right-info">

<div class="details-right-info-row">
<div class="details-right-info-left">
Tarih:
</div>

<div class="details-right-info-right">
${hitcJourney?.departuredate?.format('dd/MM/yyyy')}
</div>
</div>

<div class="details-right-info-row">
<div class="details-right-info-left">
Saat:
</div>

<div class="details-right-info-right">
${hitcJourney.departurehour}
</div>
</div>

<div class="details-right-info-row">
<div class="details-right-info-left">
Seyahat ayrıntıları:
</div>

<div class="details-right-info-right">
${hitcJourney.journeynotes}
</div>
</div>

<div class="details-right-info-row">
<div class="details-right-info-left">
Ücret Paylaşılacak mı?:
</div>

<div class="details-right-info-right">
#{if hitcJourney?.priceshare}
Evet
#{/if}
#{else}
Hayır
#{/else}
</div>
</div>

<div id="map"></div>
<p id="error"></p>

</div>

</div>

</div>

#{if hitcJourney?.user == user}

<div class="details-join-link">
<a href="/edithitcjourneydetails/${hitcJourney.id}" style="color: #59983B;">Seyahati Düzenle</a>
</div>

<div class="details-join-link">
<a href="/deletehitcjourney/${hitcJourney.id}" style="color: #59983B;">Seyahati Sil</a>
</div>
#{/if}



#{if hitcJourney?.user != user}

<div class="details-join-link">
<a href="/message/${hitcJourney.user.id}" style="color: #59983B;">Otostopçuyu Al</a>
</div>

#{/if}

<script>
    	calculateRoute("${hitcJourney.departurestate}, ${hitcJourney.departuretownn}", "${hitcJourney.arrivestate}, ${hitcJourney.arrivetownn}");
</script>
